<template>
  <button @click="showCom = !showCom">切换显隐</button>
  <!-- 自定义hook -->
  <!-- <UseMousePositionDemo v-if="showCom"></UseMousePositionDemo> -->
  <!-- <UseCountdownDemo  v-if="showCom"></UseCountdownDemo> -->
  <!-- <UseRequestDemo  v-if="showCom"></UseRequestDemo> -->
  <!-- <UseFormValidatorDemo  v-if="showCom"></UseFormValidatorDemo> -->
  <UsePusherDemo v-if="showCom"></UsePusherDemo>
</template>

<script setup lang="ts">
import { ref } from "vue";

import UseMousePositionDemo from "@/demos/UseMousePositionDemo.vue";
import UseCountdownDemo from "@/demos/UseCountdownDemo.vue";
import UseRequestDemo from "@/demos/UseRequestDemo.vue";
import UseFormValidatorDemo from "@/demos/UseFormValidatorDemo.vue";
import UsePusherDemo from "./demos/UsePusherDemo.vue";

const showCom = ref(true);
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
